<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="username" label="username" width="150"  />
      <el-table-column prop="address" label="address" width="150" />
      <el-table-column prop="birthday" label="birthday" width="150"/>
      <el-table-column prop="email" label="email" width="150" />
      <el-table-column prop="nickname" label="nickname" width="150" />
      <el-table-column prop="role" label="role" width="50"/>
      <el-table-column prop="sex" label="sex" width="50" />
      <el-table-column prop="id" label="id"  width="50"/>
      <!-- <el-table-column prop="password" label="password" width="10" /> -->
      <el-table-column prop="update_time" label="update_time"  width="100"/>
      <el-table-column prop="create_time" label="create_time"  width="100"/>
      <el-table-column fixed="right" label="Operations" width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted ,ref} from "vue";
import { getAllStudents} from "@/api/allStudent";

const tableData = ref([]) 

const handleClick = () => {
  
}

onMounted(async () => {
    tableData.value = await getAllStudents({role:1})
     console.log(tableData);
     
    console.log();
    
})
</script>

<style lang="less"  scoped>
</style>